<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$userInfo.nickname} - 用户详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            padding: 20px;
            background-color: #f8fafc;
        }

        .user-container {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 0;
            overflow: hidden;
        }

        .user-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #1a73e8;
            padding: 20px 20px 0;
        }

        .user-header {
            display: flex;
            align-items: center;
            padding: 25px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #f9fbfd, #f1f5f9);
            position: relative;
        }

        .user-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
        }

        .user-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-right: 25px;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .user-basic {
            flex: 1;
        }

        .user-name {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1a1a1a;
        }

        .user-id {
            font-size: 15px;
            color: #666;
            background: #f0f4f8;
            padding: 4px 10px;
            border-radius: 20px;
            display: inline-block;
        }

        .user-section {
            display: flex;
            gap: 20px;
            margin-left: 30px;
        }

        .card {
            background: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            text-align: center;
            min-width: 100px;
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-3px);
        }

        .card h3 {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .card p {
            font-size: 22px;
            font-weight: 600;
            color: #3498db;
        }

        .user-details {
            padding: 20px;
        }

        .detail-item {
            display: flex;
            margin-bottom: 12px;
            padding: 15px;
            border-radius: 8px;
            transition: background 0.2s;
        }

        .detail-item:hover {
            background: #f8fafc;
        }

        .detail-label {
            width: 140px;
            font-weight: 500;
            color: #555;
            font-size: 15px;
            padding-right: 10px;
            display: flex;
            align-items: center;
        }

        .detail-value {
            flex: 1;
            font-size: 15px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .id-images {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .id-image {
            width: 220px;
            height: 140px;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .id-image:hover {
            transform: scale(1.02);
        }

        .wx-qrcode {
            width: 160px;
            height: 160px;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 5px;
            background: white;
        }

        .status-0 {
            color: #ff4757;
            background: rgba(255, 71, 87, 0.1);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
        }

        .status-1 {
            color: #ffa502;
            background: rgba(255, 165, 2, 0.1);
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
        }

        .status-2 {
            color: #2ed573;
            background: rgba(46, 213, 115, 0.1);
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
        }

        .status-3 {
            color: #ff4757;
            background: rgba(255, 71, 87, 0.1);
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .user-header {
                flex-direction: column;
                text-align: center;
            }

            .user-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .user-section {
                margin-left: 0;
                margin-top: 15px;
                justify-content: center;
            }

            .detail-item {
                flex-direction: column;
            }

            .detail-label {
                width: 100%;
                margin-bottom: 5px;
            }

            .id-images {
                flex-direction: column;
            }

            .id-image {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="user-container">
        <!-- 用户基本信息 -->
        <h3 class="user-title">用户详情</h3>
        <div class="user-header">
            <img src="{$userInfo.avatar|cdnurl}" alt="用户头像" class="user-avatar">
            <div class="user-basic">
                <h1 class="user-name" style="position: relative;">{$userInfo.nickname}
                </h1>
                <div class="user-id">用户ID: {$userInfo.id}</div>
            </div>

            <div class="user-section">
                <div class="card">
                    <h3>发帖数量</h3>
                    <p>{$userInfo.postnums}</p>
                </div>
                <div class="card">
                    <h3>收藏数量</h3>
                    <p>{$userInfo.collectnums}</p>
                </div>
            </div>
        </div>

        <!-- 用户详细信息 -->
        <div class="user-details">
            <div class="detail-item">
                <div class="detail-label">认证状态:</div>
                <div class="detail-value">
                    {switch name="userInfo.stutes"}
                    {case value="0"}<span class="status-0">未认证</span>{/case}
                    {case value="1"}<span class="status-1">认证中</span>{/case}
                    {case value="2"}<span class="status-2">已认证</span>{/case}
                    {case value="3"}<span class="status-3">未通过</span>{/case}
                    {default /}未知状态
                    {/switch}
                </div>
            </div>

            <div class="detail-item">
                <div class="detail-label">手机号码:</div>
                <div class="detail-value">{$userInfo.mobile|default='未填写'}</div>
            </div>

            <div class="detail-item">
                <div class="detail-label">最大登录天数:</div>
                <div class="detail-value">{$userInfo.maxsuccessions} 天</div>
            </div>

            <div class="detail-item">
                <div class="detail-label">最近登录IP:</div>
                <div class="detail-value">{$userInfo.loginip|default='未登录过'}</div>
            </div>

            <div class="detail-item">
                <div class="detail-label">加入时间:</div>
                <div class="detail-value">{$userInfo.jointime|date='Y-m-d H:i:s',###}</div>
            </div>
            {if $userInfo.wx_image}
            <div class="detail-item">
                <div class="detail-label">微信二维码:</div>
                <div class="detail-value">
                    <img src="{$userInfo.wx_image|cdnurl}" alt="微信二维码" class="wx-qrcode">
                </div>
            </div>
            {/if}

            <div class="detail-item">
                <div class="detail-label">姓名:</div>
                <div class="detail-value">{$userInfo.username|default='未填写'}</div>
            </div>

            <div class="detail-item">
                <div class="detail-label">身份证号:</div>
                <div class="detail-value">{$userInfo.idcard|default='未填写'}</div>
            </div>

            {if $userInfo.idfront_image || $userInfo.idback_image}
            <div class="detail-item">
                <div class="detail-label">身份证照片:</div>
                <div class="detail-value">
                    <div class="id-images">
                        {if $userInfo.idfront_image}
                        <div>
                            <img src="{$userInfo.idfront_image|cdnurl}" alt="身份证正面" class="id-image">
                        </div>
                        {/if}
                        {if $userInfo.idback_image}
                        <div>
                            <img src="{$userInfo.idback_image|cdnurl}" alt="身份证反面" class="id-image">
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
            {/if}
        </div>
    </div>
</body>

</html>